<template>
	<div class="boxall" style="padding: 0 0.2rem 0.4rem 0.15rem; height: 3.4rem">
		<div class="alltitle">商品订单 TOP8</div>
		<div class="allnav" id="orderRanking"></div>
		<div class="boxfoot"></div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				orderRankingDom: null,
				orderRankingOption: []
			};
		},
		methods: {
			async orderRankingData(isLoading = true) {
				if (isLoading) {
					this.orderRankingDom.showLoading({
						text: '加载中 · · ·',
						color: '#02a6b5',
						textColor: '#fff',
						maskColor: 'rgba(4, 6, 51)'
					});
				}

				const res1 = this.$db['wmzmall-order-detail, wmzmall-goods']
					.collection()
					.groupBy('goods_id')
					.groupField('count(*) as order_cnt')
					.orderBy('order_cnt desc')
					.limit(8)
					.get();

				const res2 = this.$db['wmzmall-order-detail, wmzmall-goods, wmzmall-order']
					.collection()
					.where({
						'order_id.order_pay_state': '已付款'
					})
					.groupBy('goods_id, order_id')
					.groupField('count(*) as cnt')
					.orderBy('cnt desc')
					.limit(8)
					.get();

				let res = {
					code: 0,
					datas: []
				};

				await Promise.all([res1, res2]).then(resData => {
					if (resData[0].result.data && resData[0].result.data.length > 0) {
						if (resData[1].result.data && resData[1].result.data.length > 0) {
							let payDatas = [];
							resData[0].result.data.forEach(x => {
								if (x.goods_id.length > 0) {
									payDatas = resData[1].result.data.filter(o => o.goods_id.length >
										0 && x.goods_id[0]._id == o.goods_id[0]._id).map(o => o
										.cnt);
									x.pay_cnt = 0;
									if (payDatas.length > 0) {
										x.pay_cnt = payDatas.reduce((p, c) => {
											return p + c;
										});
									}
								}
							});
						}
					}

					resData[0].result.data.forEach(x => {
						if (x.goods_id.length > 0) {
							res.datas.push({
								name: x.goods_id[0].name.substr(0, 4),
								order_cnt: x.order_cnt,
								pay_cnt: x.pay_cnt
							});
						}
					});
				}).catch(() => {
					if (isLoading) {
						this.orderRankingDom.hideLoading();
					}
				})

				if (isLoading) {
					this.orderRankingDom.hideLoading();
				}

				if (res.datas.length > 0) {
					res.code = 200;
				}

				if (res.code == 200) {
					this.orderRankingOption.xAxis.data = [];
					this.orderRankingOption.series[0].data = [];
					this.orderRankingOption.series[1].data = [];

					res.datas.forEach(x => {
						this.orderRankingOption.xAxis.data.push(x.name);

						this.orderRankingOption.series[0].data.push({
							value: x.order_cnt
						});

						this.orderRankingOption.series[1].data.push({
							value: x.pay_cnt
						});
					});
				}
				this.orderRankingDom.setOption(this.orderRankingOption);
			},
			orderRankingCharts(callback) {
				this.orderRankingDom = this.$echarts.init(document.getElementById('orderRanking'));

				this.orderRankingOption = {
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow',
							label: {
								show: true
							}
						},
						formatter: ' {a0}: {c0}   \n {a1}: {c1}   '
					},
					grid: {
						left: '0%',
						top: '30px',
						right: '0%',
						bottom: '4%',
						containLabel: true
					},
					legend: {
						top: '0%',
						data: ['订单数', '支付数'],
						textStyle: {
							color: 'rgba(255,255,255,.5)',
							fontSize: '12'
						}
					},
					xAxis: {
						type: 'category',
						data: [],
						axisLine: {
							show: true,
							lineStyle: {
								color: '#397cbc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							show: true,
							color: '#30eee9'
						},
						splitLine: {
							show: false,
							lineStyle: {
								color: '#195384'
							}
						}
					},
					yAxis: [{
						type: 'value',
						axisLabel: {
							show: true,
							textStyle: {
								color: 'rgba(255,255,255,.6)',
								fontSize: '12'
							}
						},
						axisTick: {
							show: false
						},
						axisLine: {
							lineStyle: {
								color: '#27b4c2'
							}
						},
						splitLine: {
							show: true,
							lineStyle: {
								color: '#11366e'
							}
						}
					}],
					series: [{
							name: '订单数',
							type: 'bar',
							data: [],
							barWidth: '15', //柱子宽度
							// barGap: 1, //柱子之间间距
							itemStyle: {
								normal: {
									color: '#00d4c7',
									opacity: 1
								}
							}
						},
						{
							name: '支付数',
							type: 'bar',
							data: [],
							barWidth: '15', //柱子宽度
							// barGap: 1, //柱子之间间距
							itemStyle: {
								normal: {
									color: '#0092f6',
									opacity: 1
								}
							}
						}
					]
				};

				window.addEventListener('resize', () => {
					this.orderRankingDom.resize();
				});

				if (typeof callback === 'function') {
					callback();
				}
			}
		},
		mounted() {
			this.orderRankingCharts(() => {
				this.orderRankingData();
			});
		},
		created() {
			uni.$on('biRefresh', () => {
				this.orderRankingData(false);
			});
		}
	};
</script>

<style></style>
